<template>
  <div>
    <div class="musicLength">
      <span> 包含歌曲列表 </span>
      <span class="musicNum"> {{ musicList.length }}首歌 </span>
    </div>
    <table>
      <thead>
        <tr>
          <th></th>
          <th>
            <div class="tTitle">歌曲标题</div>
          </th>
          <th>
            <div class="tTitle">时长</div>
          </th>
          <th>
            <div class="tTitle">歌手</div>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in musicList" :key="item.id">
          <td class="tdOne">
            {{ index }} <span @click="PlayClick(item)"></span>
          </td>
          <router-link
            tag="td"
            :to="{ name: 'musicdetail', query: { id: item.id } }"
            class="tdTwo"
            >{{ item.name }} <span></span
          ></router-link>
          <td class="tdThere">
            <p class="musicTime">{{ (item.dt / 1000 / 60).toFixed(2) }}</p>
            <div class="operationBox">
              <span class="play" @click="pushMusicAction(item)"></span>
              <span class="Collection" @click="collectionBtn(item.id)"></span>
              <span class="forward"></span>
              <span class="download"></span>
            </div>
          </td>
          <td class="tdFour">
            <div class="nameBox txtHide">
              <span v-for="itemTwo in item.ar" :key="itemTwo.id"
                >{{ itemTwo.name }}/</span
              >
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  props: {
    musicList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    ...mapActions("musicStore", ["unshiftMusic", "pushMusicAction"]),
    ...mapActions("songSheetStore", [
      "set_change_songSheetBoxIsHide",
      "set_change_musicId",
    ]),
    async PlayClick(item) {
      //直接点击播放当前音乐
      await this.unshiftMusic({ data: item, that: this });
      // this.$bus.$emit("playCurrentMusic");
    },
    //收藏按钮
    collectionBtn(id) {
      this.set_change_musicId(id);
      this.set_change_songSheetBoxIsHide(true);
    },
  },
};
</script>

<style lang="scss" scoped>
.musicLength {
  margin-top: 27px;
  border-bottom: 2px solid #c20c0c;
  height: 33px;
  span {
    font-size: 20px;
    line-height: 28px;
  }
  .musicNum {
    margin: 9px 0 0 20px;
    color: #666;
    font-size: 12px;
  }
}
table {
  width: 100%;
  border: 1px solid #d9d9d9;
  border-collapse: collapse;
  tbody {
    tr {
      width: 100%;
      .tdOne {
        width: 74px;
        padding: 6px 10px;
        line-height: 18px;
        text-align: left;
        color: #999;
        span {
          float: right;
          width: 17px;
          height: 17px;
          cursor: pointer;
          background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -103px;
        }
      }
      .tdTwo {
        padding: 6px 10px;
      }
      .tdThere {
        color: #666;
        width: 100px;
        &:hover {
          .operationBox {
            display: block;
          }
          .musicTime {
            display: none;
          }
        }
        .operationBox {
          display: none;
          span {
            display: inline-block;
            width: 18px;
            height: 16px;
            vertical-align: middle;
            margin-left: 5px;
          }
          .play {
            width: 13px;
            height: 13px;
            background: url("./../../assets/imges/btnIconTwo.png") no-repeat 0 -700px;
          }
          .Collection {
            background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -174px;
          }
          .forward {
            background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -195px;
          }
          .download {
            background: url("./../../assets/imges/iconTwo.png") no-repeat -81px -174px;
          }
        }
      }
      .tdFour {
        width: 20%;
        padding: 6px 10px;
        line-height: 18px;
        text-align: left;
        color: #333;
        .nameBox {
          width: 100px;
        }
      }
      &:nth-of-type(even) {
        background: #f7f7f7;
      }
    }
  }
  thead {
    th {
      height: 38px;
      background-color: #f7f7f7;
      background-position: 0 0;
      background-image: url("./../../assets/imges/iconTwo.png");
      background-repeat: repeat-x;
      .tTitle {
        text-align: left;
        height: 18px;
        color: #666;
        line-height: 18px;
        padding: 8px 10px;
        background: url("./../../assets/imges/iconTwo.png") no-repeat 0 -56px;
      }
    }
  }
}
</style>